@layout("/common/_container.html"){

<div class="row">
	<div class="col-sm-6">
		<div id="main_bf" style="width: 600px;height:400px;"></div>
	</div>
	<div class="col-sm-6">
		<div id="main_fl" style="width: 600px;height:400px;"></div>
	</div>
</div>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
         var myChart1 = echarts.init(document.getElementById('main_bf'));
        function getLiveTypeNum(){
        	
        	$.get(Feng.ctxPath + '/mon/getLiveTypeNum', function (data) {
           	 d1=[data.d1home_and_school,data.d2home_and_school,data.d3home_and_school];
           	 d2=[data.d1more_school,data.d2more_school,data.d3more_school];
           	 d3=[data.d1live_teach,data.d2live_teach,data.d3live_teach];
           
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '直播分类并发占用量'
                    },
                    tooltip: {},
                    legend: {
                        data:['直播类型']
                    },
                    xAxis: {
                        data: ["当日","第二天","第三天"]
                    },
                    yAxis: {},
                    series: [{
                        name: '家校互通',
                        type: 'bar',
                        data: d1
                    },{
                        name: '一校带多校',
                        type: 'bar',
                        data: d2
                    },{
                        name: '直播教研',
                        type: 'bar',
                        data: d3
                    }]
                };
             // 使用刚指定的配置项和数据显示图表。
                myChart1.setOption(option); 
            });
        }
        
         getLiveTypeNum();
         //循环执行每隔10分钟
        setInterval(getLiveTypeNum,1000*5);
</script>


<script type="text/javascript">
//var dataArray =[["2015-02-21",394],["2015-02-22",158],["2015-02-23",86],["2015-02-24",207]];
var dataArray =[];
var mydataArray =[];
var myChart = echarts.init(document.getElementById('main_fl'));
function getLookNum(){
	$.get(Feng.ctxPath + '/mon/getLookNum', function (data) {
		console.log(data);
		dataArray[dataArray.length]=[data.date,data.all_num];
		mydataArray[mydataArray.length]=[data.date,data.my_num];
		console.log(dataArray);
		var option2 = {
			    title: {
			        text: '直播在线观看人数'
			    },
			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['直播总在线观看人数','项目在线观看人数']
			    },
			    xAxis: {
			        data: dataArray.map(function (item) {
			            return item[0];
			        })
			    },
			    yAxis: {
			        splitLine: {
			            show: false
			        }
			    },
			    /* toolbox: {
			        left: 'center',
			        feature: {
			            dataZoom: {
			                yAxisIndex: 'none'
			            },
			            restore: {},
			            saveAsImage: {}
			        }
			    }, */
			     /* dataZoom: [{
			        startValue: '2018-07-23'
			    }, {
			        type: 'inside'
			    }], */ 
			    visualMap: {
			        top: 10,
			        right: 10,
			        pieces: [{
			            gt: 0,
			            lte: 100,
			            color: '#096'
			        }, {
			            gt: 100,
			            lte: 300,
			            color: '#ffde33'
			        }, {
			            gt: 300,
			            lte: 500,
			            color: '#ff9933'
			        }, {
			            gt: 500,
			            lte: 1000,
			            color: '#cc0033'
			        }, {
			            gt: 1000,
			            lte: 2000,
			            color: '#660099'
			        }, {
			            gt: 2000,
			            color: '#7e0023'
			        }],
			        outOfRange: {
			            color: '#999'
			        }
			    },
			    series: [{
			        name: '直播总在线观看人数',
			        type: 'line',
			        data: dataArray.map(function (item) {
			            return item[1];
			        }),
			        markLine: {
			            silent: true,
			            data: [{
			                yAxis: 50
			            }, {
			                yAxis: 100
			            }, {
			                yAxis: 150
			            }, {
			                yAxis: 200
			            }, {
			                yAxis: 300
			            }]
			        }
			    },{
			        name: '项目在线观看人数',
			        type: 'line',
			        data: mydataArray.map(function (item) {
			            return item[1];
			        }),
			        markLine: {
			            silent: true,
			            data: [{
			                yAxis: 50
			            }, {
			                yAxis: 100
			            }, {
			                yAxis: 150
			            }, {
			                yAxis: 200
			            }, {
			                yAxis: 300
			            }]
			        }
			    }]
			};
		myChart.setOption(option2); 
	});
}
getLookNum();
//循环执行每隔10分钟
setInterval(getLookNum,1000*5);



   
</script>

<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>课程监控</h5>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-2">
                                <#clmInput id="teacherName" name="教师名称" />
                            </div>
                            <div class="col-sm-2">
                               <#clmSelect id="orgProvinceCode" name="教师就职省" >
	                               <option value=""></option>
	                               @for(item in provinceList){
				                        <option value="${item.provinceCode}">${item.provinceName}</option>
				                    @}
								</#clmSelect>
                            </div>
                            <div class="col-sm-2">
                               <#clmSelect id="orgCityCode" name="教师就职市" >
                               		<option value=""></option>
	                              
								</#clmSelect>
                            </div>
                            <div class="col-sm-3">
                               <#clmSelect id="orgAreaCode" name="教师就职区/县" >
                               		<option value=""></option>
								
								</#clmSelect>
                            </div>
                            <div class="col-sm-3">
                               <#clmSelect id="schoolId" name="教师就职学校" >
                               		<option value=""></option>
									
								</#clmSelect>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-2">
                                <#clmInput id="number" name="课程编号" />
                            </div>
                            <div class="col-sm-2">
                                <#clmInput id="subject" name="课程名称" />
                            </div>
                            <div class="col-sm-2">
                               <#clmSelect id="liveType" name="课程类型">
                               		<option value=""></option>
									<option value="home_and_school">家校互通</option>
									<option value="more_school">一校带多校</option>
									<option value="live_teach">直播教研</option>
								</#clmSelect>
                            </div>
                            <div class="col-sm-2">
                               <#clmSelect id="publicScope" name="公开范围" >
                               		<option value=""></option>
									<option value="class_public">班级公开</option>
									<option value="grade_public">年级公开</option>
									<option value="school_public">本校公开</option>
									<option value="area_public">本区/县公开</option>
									<option value="all_public">完全公开</option>
								</#clmSelect>
                            </div>
                            <div class="col-sm-2">
                               <#clmSelect id="courseCode" name="课程科目">
                               		<option value=""></option>
									@for(item in subjectList){
				                        <option value="${item.courseCode}">${item.courseName}</option>
				                    @}
								</#clmSelect>
                            </div>
                            <div class="col-sm-2">
                               <#clmSelect id="roomStatus" name="课程状态">
                               		<option value="0">全部</option>
									<option value="1">正在直播/即将开始</option>
									<option value="2">已结束</option>
								</#clmSelect>
                            </div>
                        </div>
                                           
                        <div class="row">
                        <div class="form-group">
					    	<!-- <label class="col-sm-12 control-label"></label> -->
					    	</br>
                            <div class="col-lg-2 col-sm-4">
								<#TimeCon id="startDate1" name="起始时间" isTime="true" pattern="YYYY-MM-DD hh:mm:ss"/>
							</div>
							<div class="col-lg-2 col-sm-4">
								<#TimeCon id="endDate1" name="结束时间" isTime="true" pattern="YYYY-MM-DD hh:mm:ss"/>
							</div>
							<div class="col-sm-4">
                                <#button name="搜索" icon="fa-search" clickFun="ClmRoom.search()"/>
                                <#button name="重置" icon="fa-trash" clickFun="ClmRoom.resetSearch()" space="true"/>
                            </div>
					    </div>
                        </div>
                        <!-- <div class="hidden-xs" id="ClmRoomTableToolbar" role="group">
                            @if(shiro.hasPermission("/clmRoom/detail")){
                                <#button name="查看" icon="fa-edit" clickFun="ClmRoom.openClmRoomLook()" space="true"/>
                            @}
                            @if(shiro.hasPermission("/clmRoom/update")){
                                <#button name="修改" icon="fa-edit" clickFun="ClmRoom.openClmRoomDetail()" space="true"/>
                            @}
                            @if(shiro.hasPermission("/clmRoom/delete")){
                                <#button name="删除" icon="fa-remove" clickFun="ClmRoom.delete()" space="true"/>
                            @}
                        </div> -->
                        <#table id="ClmRoomTable"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctxPath}/static/modular/clm/clmMonitor/clmMonitor.js"></script>
@}
